<script setup>
import { ref } from 'vue'
</script>

<template>
  <div class="home-container">
    <!-- 顶部区域（标题 + 简介） -->
    <section class="hero-section">
      <div class="hero-text">
        <h1 class="hero-title">Welcome to Your Vue App</h1>
        <p class="hero-subtitle">
          Explore a powerful and intuitive platform to manage your application.
        </p>
      </div>
      <div class="hero-image-wrapper">
        <!-- 在此处添加图片路径和 alt -->
        <img src="" alt="首页展示图片" class="hero-image" />
      </div>
    </section>

    <!-- 功能区域（图文并茂示例） -->
    <section class="features-section">
      <h2 class="section-title">Key Features</h2>
      <div class="features-list">
        <div class="feature-item">
          <!-- 在此处添加图片路径和 alt -->
          <img src="" alt="功能一图片" class="feature-image" />
          <h3 class="feature-title">Feature One</h3>
          <p class="feature-desc">
            简要介绍第一项功能，让用户了解其优势与用途。
          </p>
        </div>

        <div class="feature-item">
          <!-- 在此处添加图片路径和 alt -->
          <img src="" alt="功能二图片" class="feature-image" />
          <h3 class="feature-title">Feature Two</h3>
          <p class="feature-desc">
            简要介绍第二项功能，突出它能解决的问题或带来的好处。
          </p>
        </div>

        <div class="feature-item">
          <!-- 在此处添加图片路径和 alt -->
          <img src="" alt="功能三图片" class="feature-image" />
          <h3 class="feature-title">Feature Three</h3>
          <p class="feature-desc">
            简要介绍第三项功能，让新用户快速明白其价值所在。
          </p>
        </div>
      </div>
    </section>

    <!-- 底部区域（版权信息等） -->
    <footer class="footer">
      <p>© 2025 Online Examination System. All Rights Reserved.</p>
    </footer>
  </div>
</template>

<style scoped>
/* 整体页面样式 */
.home-container {
  font-family: 'Arial', sans-serif;
  color: #333;
 width: 800px;
   padding: 20px;
  margin-left: 25%;
}

/* ---------- 顶部区域（Hero Section） ---------- */
.hero-section {
  display: flex;
  flex-wrap: wrap; /* 在较小屏幕时自动换行 */
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 40px;
}

/* 标题与副标题 */
.hero-text {
  flex: 1;
  min-width: 280px;
  margin-right: 20px;
}
.hero-title {
  font-size: 40px;
  margin-bottom: 20px;
}
.hero-subtitle {
  font-size: 18px;
  line-height: 1.6;
  color: #555;
}

/* 图片 */
.hero-image-wrapper {
  flex: 1;
  text-align: center;
  min-width: 280px;
}
.hero-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ---------- 功能区域（Features Section） ---------- */
.features-section {
  margin-top: 60px;
}
.section-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
  color: #333;
}

/* 功能列表 */
.features-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

/* 单个功能卡片 */
.feature-item {
  background: #fafafa;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: box-shadow 0.3s;
}
.feature-item:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* 功能图片 */
.feature-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-bottom: 20px;
}

/* 功能标题 */
.feature-title {
  font-size: 20px;
  margin-bottom: 10px;
}
/* 功能描述 */
.feature-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

/* ---------- 底部区域（Footer） ---------- */
.footer {
  text-align: center;
  margin-top: 60px;
  font-size: 14px;
  color: #aaa;
}
</style>
